import React, { Component } from "react";
import { View, Text, Image, StyleSheet, FlatList, ActivityIndicator, TouchableWithoutFeedback } from "react-native";
import { width } from "../../util/apdater_util";
import NetUtil from "../../net/net_util";
import Loading from "../../widget/Loading";
import img_arr from "../../util/img_arr";
import * as RootNavigation from '../../../App'

export default class JobCommentList extends Component{
  constructor(props) {
    super(props);
    this.page={
      pageNum:1,
      pageSize:10
    };
    this.loading=false
    this.state={
      jobId:'',
      isMoreLoading:true,
      loading:false,
      dataList:[]
    }
  }

  componentDidMount() {
    this.state.jobId=this.props.jobId
    this.getCommentList()
  }

  reload(){
    this.page.pageNum=1
    this.setState({isMoreLoading:true})
    this.getCommentList()
  }

  clearData(){
    this.setState({dataList:[],isMoreLoading:true})
  }

  /*获取评论列表*/
  getCommentList(){
    let params={
      jobId:this.state.jobId,
      pageSize:this.page.pageSize,
      pageNum:this.page.pageNum
    }
    this.loading=true
    NetUtil.get('work/job/comment/page',params,(res)=>{
      console.log(res)
      this.loading=false
      if(res.code=200){
        let list=this.state.dataList;
        if(this.page.pageNum==1){
          list=[]
        }
        list=list.concat(res.data.data)
        let canLoading=res.data.data.length<10?false:true
        this.state.isMoreLoading=canLoading
        this.setState({dataList:list,isMoreLoading:canLoading})
      }
    })
  }

  _endReached(){
    if(!this.state.isMoreLoading||this.loading)return;
    this.page.pageNum++
    this.getCommentList()
  }

  /*点赞*/
  like(item){
    Loading.show()
    NetUtil.postFrom('work/job/comment/like',{'commentId':item.id},(res)=>{
      Loading.hide()
      if(res.code==200){
        item.isLike=item.isLike==0?1:0
        let num=item.isLike==1?1:-1
        item.likeNum=item.likeNum+num
        this.setState({dataList:this.state.dataList})
      }
    })
  }

  /*评论详情*/
  commentDetail(id){
    RootNavigation.navigate('CCommentList',{jobId:this.state.jobId,commentId:id})
  }

  _renderCommentCell=(info)=>{
    let item=info.item
    return (
      <TouchableWithoutFeedback onPress={this.commentDetail.bind(this,item.id)}>
        <View style={styles.contributeCell}>
          <Image style={styles.portrait} source={{uri:item.avatar}}></Image>
          <View  style={[styles.contributeInfo,{flex:1}]}>
            <View style={styles.commentTitleBox}>
              <Text style={styles.nickName}>{item.nickName}</Text>
              <View style={[styles.favorBox,{marginRight:14}]}>
                <Text style={{color:'#1C1C1C',fontSize:11,marginRight:5}}>{item.likeNum}</Text>
                <TouchableWithoutFeedback onPress={this.like.bind(this,item)}>
                  <Image style={{width:14,height:14}} source={item.isLike==1?img_arr.icon_favor_selected:img_arr.icon_favor_normal}></Image>
                </TouchableWithoutFeedback>
              </View>
            </View>
            <Text style={[styles.contributeDes,{marginRight:14}]}>{item.content}</Text>
            {(item.jobComments&&item.jobComments.length>0)?(
              <View style={styles.comment}>
                {item.jobComments.map((childComment,childIndex)=>{
                   if(childComment.commentId==childComment.pid&&childIndex<2){
                     return <Text style={[styles.commentDes,styles.commentItem]} key={'childIndex'+childIndex}><Text style={styles.name}>{childComment.nickName}：</Text>{childComment.replyContent}</Text>
                   }
                   else if(childComment.commentId!=childComment.pid&&childIndex<2) {
                    return <Text style={[styles.commentDes,styles.commentItem]} key={'childIndex'+childIndex}><Text style={styles.name}>{childComment.nickName}</Text><Text style={[styles.commentDes,styles.replayTitle]}> 回复 </Text><Text style={styles.name}>{childComment.replyNickName}：</Text>{childComment.replyContent}</Text>
                   }
                   else return null
                })}
                {item.jobComments.length>2?(<Text style={styles.replay}>共{item.jobComments.length}条回复></Text>):null}
              </View>
            ):null}
            <Text style={styles.createTime}>{item.displayTime}</Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
    )
  }

  renderFooter(){
    if(this.state.isMoreLoading){
      return(
        <View style={{marginVertical: 10}}>
          <ActivityIndicator/>
        </View>
      )
    }else{
      return(
        <View style={{marginVertical: 10,justifyContent:'center',alignItems:'center'}}>
          <Text style={{color:'#999999'}}>没有更多了。</Text>
        </View>
      )
    }
  }

  render() {
    return (
      <View style={{height:'100%',width:'100%'}}>
        <FlatList data={this.state.dataList}
                  // onEndReachedThreshold = {0.01} //当距离内容比例不足内容0.1比例时触发onEndReached
                  // onEndReached = {this._endReached.bind(this)} //上拉加载数据
                  ListFooterComponent={()=>this.renderFooter()}
                  renderItem={this._renderCommentCell}
                  showsVerticalScrollIndicator={false}
                  keyExtractor={(item)=>{return 'comment'+item.id}}
                  scrollEnabled={false}>

        </FlatList>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  /**contributeCell*/
  contributeCell:{
    flexDirection:'row',
    justifyContent:'flex-start',
    paddingTop:19,
    paddingLeft:15
  },
  contributeInfo:{
    marginLeft:15,
    borderBottomWidth:1,
    borderBottomColor:'#F8F8F8',
    paddingBottom: 17,
    borderBottomStyle:'solid'
  },
  portrait:{
    width:30,
    height:30,
    borderRadius:15
  },
  nickName:{
    color:'#1C1C1C',
    fontSize:13,
    fontWeight:'500'
  },
  contributeDes:{
    color:'#1C1C1C',
    fontSize:15,
    marginTop:15
  },
  contributeImgBox:{
    marginTop:12,
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center'
  },
  contributeImg:{
    width:(width-85)/3.0,
    height:(width-85)/3.0,
    marginRight:5,
    borderRadius:5
  },
  contributeFooter:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    marginTop:17
  },
  footerTitle:{
    color:'#C5C5C5',
    fontSize:10
  },
  blank:{
    height:100,
    width:'100%',
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center'
  },
  passwordIcon:{
    width:30,
    height:30
  },
  blankTitle:{
    color:'#959595',
    fontSize:15,
    marginLeft:11
  },
  commentTitleBox:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center'
  },
  favorBox:{
    flexDirection:'row',
    justifyContent:'flex-end',
    alignItems:'center'
  },
  comment:{
    backgroundColor:'#F6F6F8',
    paddingHorizontal:10,
    paddingVertical: 12,
    marginTop:8,
    marginRight:15,
    borderRadius:2
  },
  name:{
    color:'#262626',
    fontSize:12,
    fontWeight:'500'
  },
  commentDes:{
    color:'#565656',
    fontSize:12
  },
  commentItem:{
    marginBottom: 10
  },
  replay:{
    color:'#3CA1FD',
    fontSize:11
  },
  replayTitle:{
    color:'#565656',
    fontSize:11,
    marginLeft:10,
    marginRight:10
  },
  createTime:{
    color:'#C5C5C5',
    fontSize:10,
    marginTop:15
  }
})
